<template>
	<view>
		<view class="block">
			<view class="content">
				<view class="orderinfo">
					<view class="row">
						<view class="nominal">订单名称:</view>
						<view class="text">{{order.title}}</view>
					</view>
					<view class="row">
						<view class="nominal">订单金额:</view>
						<view class="text">{{order.total_fee/100.0}}元</view>
					</view>
				</view>
			</view>
		</view>
		<view class="block">
			<view class="title">
				选择支付方式
			</view>
			<view class="content">
				<view class="pay-list">
					<view v-for="(item,index) in payment" class="row" @tap="paytype=item.sign">
						<view class="left">
							<image :src="item.logo"></image>
						</view>
						<view class="center">
							{{item.name}}
						</view>
						<view class="right">
							<radio :checked="paytype==item.sign" color="#025BFF" />
						</view>
					</view>
				</view>
			</view>
			<!-- vk万能支付组件 -->
			<vk-uni-pay ref="vkPay" :query-payment-action="vkPay.queryPaymentAction" :status.sync="vkPay.status"
				:code-url.sync="vkPay.codeUrl" :page-show="vkPay.pageShow" :polling="vkPay.polling"></vk-uni-pay>
		</view>
		<view class="pay">
			<view class="btn" @tap="doDeposit">立即支付</view>
			<view class="tis">
				点击立即支付，即代表您同意<view class="terms">
					《条款协议》
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import vkUniPay from "@/uni_modules/vk-uni-pay/components/vk-uni-pay/vk-uni-pay"
	let time = null;
	export default {
		components: {
			vkUniPay
		},
		data() {
			return {
				orderId: 0,
				order: {
					title: '',
					total_fee: 0
				},
				goods: {},
				paytype: '', //支付类型,
				payment: {},
				vkPay: {
					/**
					 * 查询支付状态的云函数配置
					 * 如果是非路由框架，则action为字符串，值为云函数名称
					 * 如果是路由框架，则按下方配置填写
					 */
					queryPaymentAction: {
						name: "router", // 云函数名称
						action: "client/pay/pub/queryPayment", // 路由模式下云函数地址
						actionKey: "$url", // 路由模式下云函数地址的识别key
						dataKey: "data" // 路由模式下云函数请求参数的识别key
					},
					// PC支付的付款二维码地址
					codeUrl: "",
					// 当前支付状态 0:等待发起支付 1:支付中 2:已支付
					status: 0,
					// 当前页面是否显示
					pageShow: true,
					// 启用轮询检测订单支付状态（仅h5支付有效）
					polling: true,
				},
			};
		},
		onLoad(option) {
			this.orderId = option.order_id
			this.getOrder()
		},
		onUnload() {
			if (time != null) {
				clearInterval(time);
			}
		},
		methods: {
			//根据订单号查询出订单详情
			getOrder() {
				let that = this
				uni.vk.callFunction({
					url: 'client/order/kh/detail',
					data: {
						"_id": this.orderId
					},
					success(res) {
						that.order = res.data.order;
						that.goods = res.data.goods;
						that.payment = res.data.payment

						//如果是免费订单 直接支付成功
						if (that.order.total_fee == 0) {
							uni.redirectTo({
								url: './success?amount=' + (that.order.total_fee / 100.0)
							});
						}

						//如果已经成功支付 则关闭 返回上一页
						if (that.order.status == 2) {
							if (time != null) {
								clearInterval(time);
								uni.hideLoading()
							}
							uni.redirectTo({
								url: './success?amount=' + (that.order.total_fee / 100.0)
							});
						}
					}
				});
			},
			doDeposit() {
				if (this.paytype == '') {
					uni.showToast({
						icon: "none",
						title: '请选择支付方式'
					});
					return
				}
				let that = this

				//官方支付
				if (this.paytype == 'wxpay' || this.paytype == 'alipay') {
					this.$refs.vkPay.createPayment({
						// 如果是非路由框架，则action为字符串，值为云函数名称
						// 如果是路由框架，则按下方配置填写
						action: {
							name: "router", // 云函数名称
							action: "client/payment/kh/create", // 路由模式下云函数地址
							actionKey: "$url", // 路由模式下云函数地址的识别key(注意VK路由框架下,此值为$url)
							dataKey: "data" // 路由模式下云函数请求参数的识别key
						},
						// 请求数据
						data: {
							provider: this.paytype,
							oid: this.orderId,
						},
						// 成功回调
						success: res => {
							// this.toast("支付成功", "success");
							// setTimeout(() => {
							// 	uni.navigateBack({
							// 		delta: 1
							// 	})
							// }, 200);
							uni.redirectTo({
								url: './success?amount=' + (that.order.total_fee / 100.0)
							});
						},
						// 失败回调
						fail: res => {
							if (res.failType === "create") {
								// 创建支付失败时提示
								this.alert(res.msg);
							} else if (res.failType === "request") {
								// 请求支付失败时提示
								this.toast("请求支付失败");
							} else if (res.failType === "result") {
								// 支付结果失败时提示
								this.toast("支付失败");
							}
						},
						// 取消回调
						cancel: res => {
							this.toast("用户取消支付");
						}
					});
				}

				//YunGouOS支付
				if (this.paytype == 'YunGouOS_wxpay' || this.paytype == 'YunGouOS_alipay') {
					uni.vk.callFunction({
						url: 'client/payment/kh/create',
						title: "支付中...",
						data: {
							provider: this.paytype,
							oid: this.orderId,
						},
						success(res) {
							//拉起支付
							if (res.platform == 'MP-WEIXIN' && res.paytype == 'YunGouOS_wxPay') {
								that.YunGouOS_wxPay_minapp(res.params)
							} else {
								that.YunGouOS_h5Pay(res.params)
							}
						}
					});
				}
			},
			YunGouOS_h5Pay(data) {
				uni.showToast({
					icon: "loading",
					title: "准备支付ing..."
				})
				// #ifdef H5
				window.location.href = data
				// #endif

				// #ifndef H5
				let wv = plus.webview.create("", "pay-webview", {
					plusrequire: "none",
					'uni-app': 'none',
				});
				wv.loadURL(data, {
					Referer: 'http://www.yungouos.com'
				});
				var currentWebview = this.$scope.$getAppWebview();
				currentWebview.append(wv);
				wv.hide();
				//轮询查询自己系统的订单状态
				uni.showLoading({
					title: "支付中..."
				})
				time = setInterval(() => {
					//调用查询订单
					this.getOrder();
				}, 1000)
				// #endif
			},
			YunGouOS_wxPay_minapp(data) {
				let that = this
				wx.navigateToMiniProgram({
					appId: 'wxd9634afb01b983c0', //支付收银小程序的appid 固定值 不可修改
					path: '/pages/pay/pay', //支付页面 固定值 不可修改
					extraData: data, //携带的参数 参考API文档
					success(res) {
						//支付成功
						uni.redirectTo({
							url: './success?amount=' + (that.order.total_fee / 100.0)
						});
					},
					fail(res) {
						//打开失败业务
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.block {
		width: 94%;
		padding: 0 3% 40upx 3%;

		.title {
			width: 100%;
			font-size: 34upx;
		}

		.content {
			.orderinfo {
				width: 100%;
				border-bottom: solid 1upx #eee;

				.row {
					width: 100%;
					min-height: 90upx;
					display: flex;
					align-items: center;

					.nominal {
						flex-shrink: 0;
						font-size: 32upx;
						color: #7d7d7d;
					}

					.text {
						width: 70%;
						margin-left: 10upx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						font-size: 32upx;
					}
				}
			}

			.pay-list {
				width: 100%;
				border-bottom: solid 1upx #eee;

				.row {
					width: 100%;
					height: 120upx;
					display: flex;
					align-items: center;

					.left {
						width: 100upx;
						flex-shrink: 0;
						display: flex;
						align-items: center;

						image {
							width: 80upx;
							height: 80upx;
						}
					}

					.center {
						width: 100%;
						font-size: 30upx;
					}

					.right {
						width: 100upx;
						flex-shrink: 0;
						display: flex;
						justify-content: flex-end;
					}
				}
			}
		}
	}

	.pay {
		margin-top: 20upx;
		width: 100%;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;

		.btn {
			width: 70%;
			height: 80upx;
			border-radius: 80upx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
			background-color: #025BFF;
			box-shadow: 0upx 5upx 10upx rgba(0, 0, 0, 0.2);
		}

		.tis {
			margin-top: 10upx;
			width: 100%;
			font-size: 24upx;
			display: flex;
			justify-content: center;
			align-items: baseline;
			color: #999;

			.terms {
				color: #5a9ef7;
			}
		}
	}
</style>